<template>
  <el-form v-if="data" ref="form" :model="data" :rules="rules" class="goods-form" label-position="left" label-width="85px">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="图片">
          <el-upload
            action=""
            accept="image/*"
            multiple
            :auto-upload="false"
            list-type="picture-card"
            :file-list="data.img"
            :on-change="handleImgChange"
            :on-remove="handlePicRemove"
            :before-remove="handleBeforeRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="附属图片">
          <el-upload
            action=""
            accept="image/*"
            multiple
            :auto-upload="false"
            list-type="picture-card"
            :file-list="data.append_img"
            :on-change="handleAppendImgChange"
            :on-remove="handlePicRemove"
            :before-remove="handleBeforeRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="送货人" prop="us_id">
          <el-select v-model="data.us_id" :loading="userLoading" filterable placeholder="请选择送货人">
            <el-option v-for="item in sendUsers" :key="item.id" :label="item.label" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <!-- <el-form-item label="所属专场" prop="lid">
          <el-select v-model="data.lid" :loading="lotLoading" filterable placeholder="请选择专场">
            <el-option v-for="item in lots" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item> -->
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="图录号" prop="number">
          <el-input v-model.trim="data.number" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品名称" prop="name">
          <el-input v-model.trim="data.name" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="起拍价" prop="start">
          <el-input v-model.trim="data.start" type="number" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="底价" prop="resr_price">
          <el-input v-model.trim="data.resr_price" type="number" :min="0" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="预估价">
          <el-row :gutter="0">
            <el-col :xs="11" :sm="11" :md="11" :lg="11">
              <el-input v-model.trim="data.begin_price" type="number" :min="0" />
            </el-col>
            <el-col :xs="2" :sm="2" :md="2" :lg="2" style="text-align:center">~</el-col>
            <el-col :xs="11" :sm="11" :md="11" :lg="11">
              <el-input v-model.trim="data.end_price" type="number" :min="0" />
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="邮寄费" prop="postage">
          <el-input v-model.trim="data.postage" type="number" :min="0" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品库号" prop="lib_number">
          <el-input v-model.trim="data.lib_number" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品库位" prop="location">
          <el-input v-model.trim="data.location" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="ID号" prop="id_number">
          <el-input v-model.trim="data.id_number" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="入库日期" prop="indepot_date">
          <el-date-picker v-model="data.indepot_date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="出库日期" prop="outdepot_date">
          <el-date-picker v-model="data.outdepot_date" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="物流跟踪号" prop="track_number">
          <el-input v-model.trim="data.track_number" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="结算与否">
          <el-radio-group v-model="data.is_settlement">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品类别" prop="classname">
          <el-input v-model.trim="data.classname" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品等级" prop="level">
          <el-input v-model.trim="data.level" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品年代" prop="year">
          <el-input v-model.trim="data.year" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品尺寸" prop="size">
          <el-input v-model.trim="data.size" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品款识" prop="style">
          <el-input v-model.trim="data.style" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12">
        <el-form-item label="拍品作者" prop="author">
          <el-input v-model.trim="data.author" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="作者简介" prop="summary">
          <el-input v-model.trim="data.summary" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="作品介绍" prop="introduction">
          <el-input v-model.trim="data.introduction" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="品相报告" prop="report">
          <el-input v-model.trim="data.report" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="检索关键词" prop="keyword">
          <el-input v-model.trim="data.keyword" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="附属品" prop="appendix">
          <el-input v-model.trim="data.appendix" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="推荐" prop="recommend">
          <el-input v-model.trim="data.recommend" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="备注" prop="remark">
          <el-input v-model.trim="data.remark" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-form-item label="销售链接" prop="link">
          <el-input v-model.trim="data.link" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item class="goods-form-btn">
      <el-button v-if="mode === 'edit'" size="" @click="$emit('goback')">返回</el-button>
      <el-button size="" type="primary" :loading="submitLoading" @click="submitForm">
        {{ mode === 'add' ? '添 加' : '更 新' }}
      </el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getAllUsers } from '@/api/user'
import { getAllLots } from '@/api/lot'
import { delGoodsImg } from '@/api/goods'

export default {
  props: {
    // add edit
    mode: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default: () => JSON.parse(JSON.stringify(this.form))
    }
  },
  data () {
    return {
      userLoading: false,
      sendUsers: [],
      lotLoading: false,
      lots: [],
      form: {
        lid: '',
        us_id: '',
        number: '',
        name: '',
        classname: '',
        lib_number: '',
        location: '',
        year: '',
        size: '',
        style: '',
        author: '',
        summary: '',
        report: '',
        appendix: '',
        recommend: '',
        level: '',
        start: 10000,
        resr_price: '',
        begin_price: '',
        end_price: '',
        postage: '',
        remark: '',
        img: [],
        append_img: [],
        id_number: '',
        indepot_date: '',
        outdepot_date: '',
        track_number: '',
        is_settlement: 0,
        introduction: '',
        keyword: '',
        link: '',
      },
      rules: {
        number: [{ required: true, message: '图录号不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        // lid: [{ required: true, message: '专场不能为空', trigger: 'change' }]
      },
      formData: new FormData(),
      submitLoading: false
    }
  },
  mounted () {
    this.fetchUsers()
    this.fetchLots()
  },
  methods: {
    fetchUsers () {
      this.userLoading = true
      getAllUsers().then(res => {
        this.sendUsers = res.data.send
        this.userLoading = false
      }).catch(err => {
        console.log(err)
        this.userLoading = false
      })
    },
    fetchLots () {
      this.lotLoading = true
      getAllLots().then(res => {
        this.lots = res.data
        this.lotLoading = false
      }).catch(err => {
        console.log(err)
        this.lotLoading = false
      })
    },
    handleBeforeRemove (file, fileList) {
      let a = true
      if (file && file.status === 'success') {
        a = this.$confirm(`确定删除该图片吗？`)
      }
      return a
    },
    handlePicRemove (file, fileList) {
      if (file.status === 'success' && this.mode === 'edit') {
        delGoodsImg({ gid: this.data.id, url: file.url }).then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        }).catch(err => {
          console.log(err)
        })
      }
    },
    picVerify (file, fileList) {
      const index = fileList.indexOf(file)
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        fileList.splice(index, 1)
        this.$message.error('单张图片大小不可超过1M!')
      }
      return isLt1M
    },
    handleImgChange (file, fileList) {
      const fileArr = fileList.filter(el => el.status === 'ready')
      const index = fileArr.indexOf(file)
      const isLt1M = this.picVerify(file, fileList)
      if (isLt1M) {
        this.formData.set(`img[${index}]`, file.raw)
      }
    },
    handleAppendImgChange (file, fileList) {
      const fileArr = fileList.filter(el => el.status === 'ready')
      const index = fileArr.indexOf(file)
      const isLt1M = this.picVerify(file, fileList)
      if (isLt1M) {
        this.formData.set(`append_img[${index}]`, file.raw)
      }
    },
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          Object.keys(this.data).forEach(key => {
            this.formData.set(key, this.data[key])
          })
          this.submitLoading = true
          this.$emit('submit', this.formData)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-form {
  width: 100%;
  .el-select {
    width: 100%;
  }
  &-btn {
    text-align: center;
    margin: 20px 0;
  }
}
</style>
